$(function () {

    var promotionTable = $("#promotionTable").bootstrapTable({
        url: '/promotion/getAllPromotion',         //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        toolbar: '#promotion_toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        //sortable: false,                     //是否启用排序
        //sortOrder: "asc",                   //排序方式
        //queryParams: 'clothType=70',//传递参数（*）
        //sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "barCode",                     //每一行的唯一标识，一般为主键列
        showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表

        columns: [

            {
                field: 'productName',
                title: '款式'
            }, {
                field: 'productId',
                title: '货号'
            }, {
                field: 'originalPrice',
                title: '吊牌价'
            }, {
                field: 'salePrice',
                title: '售价',
                sortable: true
            }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                // events: operateEvents,
                formatter: function (value, row, index) {
                    return '<input type="button" name="productDetail" class="btn btn-success" data-value="' + row['productId'] + '" value="商品">' +
                        '<input type="button" name="imageDetail" class="btn btn-default" data-value="' + row['productId'] + '" value="图片">'

                }
            }]
    });



    var vendorProductTable = $("#vendorProductTable").bootstrapTable({
        url: '/web/getAllVendorProduct',         //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        //sortable: false,                     //是否启用排序
        //sortOrder: "asc",                   //排序方式
        //queryParams: 'clothType=70',//传递参数（*）
        //sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
        showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        onEditableSave: function (field, row, oldValue, $el) {

            console.log(row);


            var member = row;
            $.ajax({
                type: "post",
                url: "/web/updateVendorProduct",
                data: row,
                success: function (data) {

                }

            });
        },

        columns: [

            {
                field: 'barcode',
                title: 'LB条码',
                editable: true
            }, {
                field: 'supplierProductId',
                title: '原货号',
                editable: true
            }, {
                field: 'supplierName',
                title: '厂商姓名',
                editable: true
            }, {
                field: 'supplierAddress',
                title: '厂商地址',
                editable: true
            }]
    });


    //
    // $("#imageFile").fileinput({
    //     language: 'zh',
    //     uploadUrl: '/inventory/uploadImage',
    //     maxFileCount: 300 //表示允许同时上传的最大文件个数
    //
    // })


    $("body").on('click', 'input[name=imageDetail]', function (event) {
        var productId = $(event.currentTarget).attr('data-value');
        // $("#imageDetailModal").attr('data-value',productId);
        $("#imageDetailModal").modal('show');
        //向后台请求图片并显示出来

        $.ajax({
            url: '/product/getProductImageByProductId/' + productId,
            success: function (datas) {
                var imageList = JSON.parse(datas);
                var tableHtml ='<ul class="list-view image fluid">';

                imageList.forEach(function (imageInfo) {
                    tableHtml+= '<div class="media">\n' +
                        '  <div class="media-left media-middle">\n' +
                        '    <a href="#">\n' +
                        '      <img class="media-object" width="50" height="50" src='+imageUrl+imageInfo.attrUrl+'" alt="...">\n' +
                        '    </a>\n' +
                        '  </div>\n' +
                        '  <div class="media-body">\n' +
                        '    <h4 class="media-heading">'+imageInfo.productId+'  '+imageInfo.attrType+' '+imageInfo.attrUrl+'</h4>\n'+
                        '<input type="button" name="setProductImage" class="btn btn-default" data-pp = "'+imageInfo.productId+'" data-value = "'+imageInfo.attrUrl+'" value="产品图">'+
                        '<input type="button" name="deleteImage" class="btn btn-default" data-value = "'+imageInfo.id+'" value="删除">'+
                        '<input type="text" name="moveImage" class="" data-value = "'+imageInfo.id+'" value="'+imageInfo.orderNum+'">'+
                        '  </div>\n' +
                        '</div>'
                });
                for (var imageInfo in imageList){


                }
                tableHtml+='</ul>'
                $("#image-list").html(tableHtml);
            }
        });


        //注册两个上传事件
        $("#uploadMainImage").fileinput({
            language: 'zh',
            uploadUrl: '/inventory/uploadImage?productId=' + productId + '&type=0',
            //uploadUrl: '/inventory/uploadImage',
            maxFileCount: 300 //表示允许同时上传的最大文件个数
        });

        $("#uploadDescImage").fileinput({
            language: 'zh',
            uploadUrl: '/inventory/uploadImage?productId=' + productId + '&type=1',
            maxFileCount: 300 //表示允许同时上传的最大文件个数
        });



    });

    $('body').on('click','input[name=deleteImage]',function (event) {
        var id  = $(event.currentTarget).attr('data-value');
        $.ajax({
            url:'/product/deleteProductImageById/'+id,
            success:function (data) {
                alert('删除成功，请关闭框框重新打开')
            }
        })
    });
    $('body').on('click','input[name=setProductImage]',function (event) {
        var productImageUrl  = $(event.currentTarget).attr('data-value');
        var productId  = $(event.currentTarget).attr('data-pp');
        $.ajax({
            url:'/product/setProductImageByProductId/'+productId+'?imageUrl='+productImageUrl,
            success:function (data) {
                alert('设置成功，请关闭框框重新打开')
            }
        })
    });

    $("#submitVendorProduct").on('click',function (event) {
        var productId = $("#productId").val();
        var vendorProductId = $("#vendorProductId").val();
        var vendorId = $("#vendorId").val();
        var vendorName = $("#vendorName").val();
        var vendorAddr = $("#vendorAddr").val();
        var vendorProduct={
            productId:productId,
            vendorProductId:vendorProductId,
            vendorId:vendorId,
            vendorName:vendorName,
            vendorAddr:vendorAddr
        };
        $.ajax({
            url:'/web/newVendorProduct',
            type:'post',
            data:vendorProduct,
            success:function (datas) {
                $("newProductVendorModal").modal('hide');
                window.location.reload();

            }
        })
    })

    $("body").on('blur','input[name=moveImage]',function (event) {
        var newOrderNum = $(event.currentTarget).val();
        var id = $(event.currentTarget).attr("data-value");
        $.ajax({
            url:'/product/updateImageOrder?id='+id+'&orderNum='+newOrderNum,
            success:function (datas) {

            }
        })
    })

    


});